<template>
	<view>
		<view class="Box">
			<image class="bgImg" style="width:690rpx;margin: 0 auto;" :src="item.notice_poster" mode="widthFix"></image>
			<!-- /pagesC/static/images/bgimg.png -->
			
		</view>
		<view class="main">
			<view class="Info">
				<view class="Name">{{item.room_title}}</view>
				<view class="Time">预约时间：{{formaDate(item.live_booking_time)}}</view>
				<!-- {{formaDate(item.live_booking_time)}} -->
			</view>
			<!-- <view class="tip">距离直播还有</view> -->
			<view class="surplus">
				<text>{{tian}}</text>天
				<text>{{shi}}</text>时
				<text>{{fen}}</text>分
				<text>{{miao}}</text>秒
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allMiao:100,
				tian:"",
				shi:"",
				fen:"",
				miao:"",
				item:""
			}
		},
		onLoad(e) {
			this.item = JSON.parse(e.item)||""
			this.allMiao = parseInt(this.item.live_booking_time - new Date().getTime()/1000) 
			console.log(this.item)
			this.djs()
		},
		methods: {
			formaDate(dateStr,pattern = ''){
					let str=parseInt(dateStr.toString().padEnd(13,'0'));
					let dt = new Date(str);
					let yy = dt.getFullYear();
					// ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
					let mm = (dt.getMonth() + 1).toString().padStart(2, '0');
					let dd = dt.getDate().toString().padStart(2, '0');
					let h = dt.getHours().toString().padStart(2, '0');
					let m = dt.getMinutes().toString().padStart(2, '0');
					let s = dt.getSeconds().toString().padStart(2, '0');
					if (pattern.toLowerCase() === 'yyyy-mm-dd') {
						return yy + '-' + mm + '-' + dd
					} else {
						return yy + '-' + mm + '-' + dd + ' ' + h + ':' + m + ':' + s
					}
				},
			djs() {
				var tt = setInterval(() => {
					this.allMiao--;
					this.tian = parseInt(this.allMiao / (3600*24));
					this.shi = parseInt((this.allMiao-this.tian*3600*24) / 3600);
					this.fen = parseInt((this.allMiao % 3600) / 60);
					this.miao = this.allMiao - this.tian*3600*24 - this.shi * 3600 - this.fen * 60;
					// console.log(this.allMiao,this.shi,this.fen,this.miao);
					if (this.shi < 10) {
						this.shi = '0' + this.shi
					}
					if (this.fen < 10) {
						this.fen = '0' + this.fen
					}
					if (this.miao < 10) {
						this.miao = '0' + this.miao
					}
					if (this.allMiao == 0) {
						clearInterval(tt);
						//console.log("时间到")
					}
			
				}, 1000)
			},
		}
	}
</script>

<style>
	.surplus text{
		font-size: 60rpx;
		color: #F86901;
		text-align: center;
		display: inline-block;
		width: 80rpx;
		background-color: #EEEEEE;
		line-height: 80rpx;
		font-weight: bold;
		margin: 0 10rpx;
	}
	.surplus{
		font-size: 40rpx;
		color: #F86901;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	.tip{
		font-size: 60rpx;
		text-align: center;
		margin: 0 0 30rpx;
		color: #F86901;
	}
	.Time{
		/* color: #FFFFFF; */
		text-align: center;
		display: inline-block;
		/* border: 1rpx solid #FFFFFF; */
		padding: 0 20rpx;
		border-radius: 30rpx;
	}
	.Info{
		/* position: absolute; */
		z-index: 3;
		width: 100%;
		text-align: center;
	}
	.Name{
		font-size: 45rpx;
		color: #000;
		text-align: center;
		/* margin-top: 50rpx; */
	}
	.bgImg{
		position: absolute;
		top: 0;
		z-index: 1;
	}
	.Box{
		position: relative;
		height: 690rpx;
		overflow: hidden;
		/* height: 340rpx; */
	}
	page{
		background-color: #F86901;
		padding: 30rpx;
		overflow: hidden;
	}
	.main{
		width: 690rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}
</style>
